<template>
  <div class="home">
    <div class="main">
      <div class="header"></div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, i) in banner" :key="i"
          ><img :src="item" alt=""
        /></van-swipe-item>
      </van-swipe>
      <h2 class="pushOrder">发布订单<span>我发布的 ></span></h2>
      <div class="game">
        <ul>
          <li v-for="(itm, i) in homelist.games" :key="i" @click="getgamename(itm)">
            <router-link to="/postorder">
            <img :src="itm.gameImgUrl" alt="" />
            <p>{{ itm.gameName }}</p>
            </router-link>
          </li>
          <li>
            <router-link to="/moregame">
            <img src="../assets/img/more.png" alt="" />
            <p>更多</p>
            </router-link>
          </li>
        </ul>
      </div>
      <div class="btn">
        <p><router-link to="/postorder"><img src="../assets/img/fadan.png" alt="" /></router-link></p>
        <p><img src="../assets/img/jiedan.png" alt="" /></p>
      </div>
      <van-notice-bar left-icon="volume-o" :scrollable="false">
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="2000"
          :show-indicators="false"
        >
          <van-swipe-item v-for="(itm, i) in homelist.takeOrders" :key="i"
            >刚刚{{ itm.studioAccount }}接手{{ itm.goodsName }}</van-swipe-item
          >
        </van-swipe>
      </van-notice-bar> 
    </div>
    <div class="bottom">
      <router-link to="/coupons">
        <img src="../assets/img/xjj.png" alt="" />
        </router-link>
        <div class="btm-bottom">
          <div class="activity">
            <div>
              <h2>活动中心</h2>
              <p>活动不断，惊喜不断</p>
            </div>
            <div class="pic"><img src="../assets/img/redbag.png" width="60"></div>
          </div>
          <div class="newdeal">
            <div>
              <h2>新手攻略</h2>
              <p>轻松玩转app</p>
            </div>
            <div class="pic"><img src="../assets/img/newdeal.png" width="60"></div>
          </div>
        </div>
         <p class="sloganText">--代练宝全程为您提供担保服务--</p>
      </div>
    <Footer />
    <transition>
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
// @ is an alias to /src
import Footer from "@/components/footer.vue";
import axios from "axios";
import {mapState} from 'vuex'
export default {
  components: {
    Footer,
  },
  computed: {
    ...mapState({
       banner:state=>state.home.banner
    })
  },
  data() {
    return {
      homelist: [],
    };
  },
  created() {
    axios.post("/main/getAppHomePage").then((res) => {
      // console.log(res);
      this.homelist = res.data.result;
    });
  },
  methods: {
    getgamename(itm) {
      this.$store.commit('moregame/gamename',itm)
    }
  },
};
</script>
<style src="../assets/css/home.css" scoped>
</style>
